<template>
    <div>
        <div class="content11">
            <div class="centerV">
                <div v-for="(item, index) in lists" :key='index' class="centerV-item" :class="index!=0?'centerV-itemT':''">
                    <div v-for="(subItem, subIndex) in lists[index]" :key='subIndex' class="centerV-subItem" @click="didClickItem(subItem)">
                        <!-- 上边内容 -->
                        <div class="subItem-topV">
                            <div class="subItem-left">
                                <image class="subLeft-img" :src="subItem.icon"></image>
                                <div class="subLeft-title">{{subItem.title}}</div>
                                <!-- 0:#AAAAAA 12px 1:#FFAC1C 14px -->
                                <div class="subLeft-subTitle" :class="subItem.subTitleType==1?'subLeft-subTitle1' :''">{{subItem.subTitle}}</div>
                            </div>

                            <div class="subItem-right">
                                <!-- rightType = 0:普通样式 1:输入框样式 -->
                                <div v-if="subItem.rightType==0" class="subRight-normalV">
                                    <div v-if="subItem.detail.length==0" class="subRight-title">{{subItem.detailPlaceholder}}</div>
                                    <div v-else class="subRight-title1">{{subItem.detail}}</div>
                                    <!-- 0:蓝色下箭头 1:灰色右箭头 2:问好图标 -->
                                    <image class="subRight-img" :class="subItem.rightIconType==0?'blueDown-img' :subItem.rightIconType==1?'grayArrow-img' :subItem.rightIconType==2?'blueMark-img' :''"
                                     :src="subItem.rightIcon"></image>
                                </div>
                                <!-- rightType = 0:普通样式 1:输入框样式 -->
                                <div v-else-if="subItem.rightType==1" class="subRight-inputV">
                                    <!-- <textarea @input="textareaInput" class="cnt-textarea textareaFont" placeholder="请输入内容" placeholder-style="color:#999999"/> -->
                                    <input :id="subItem.title" @input="inputChange" class="inputV-input" :type="subItem.inputType" :placeholder="subItem.inputPlaceholder"
                                     placeholder-style="color:#999999" />
                                    <div class="inputV-text">{{subItem.inputUnit}}</div>
                                </div>
                            </div>
                        </div>

                        <!-- 下边分割线 -->
                        <div v-if="subIndex!=lists[index].length-1" class="subItem-btmV"></div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>


<script>
    export default {
        props: {
            pLists: {
                typs: Array, // 类型数组
                default: [], // 默认值
                required: true, // 是否必传
            }
        },
        mounted() {
            this.lists = this.pLists; // 内部接收
        },
        data() {
            return {
                lists: [] // 定义属性
            }
        },
        methods: {
            // 为detail赋值
            setDetailValue: function(string, value) {
            
                var datas = this.lists;
                for (let i = 0; i < datas.length; i++) {
                    var item = datas[i];
                    for (let j = 0; j < item.length; j++) {
                        var subItem = item[j];
                        var title = subItem.title;
                        if (title == string) {
                            subItem.detail = value;
                        }
                    }
                }
            },
            // 为subTitle赋值
            setSubTitleValue: function(string, value) {
                var datas = this.lists;
                for (let i = 0; i < datas.length; i++) {
                    var item = datas[i];
                    for (let j = 0; j < item.length; j++) {
                        var subItem = item[j];
                        var title = subItem.title;
                        if (title == string) {
                            subItem.subTitle = value;
                        }
                    }
                }
            },

            // 点击每一行 --- 子组件来触发父组件的方法
            didClickItem: function(subItem) {
               
                var title = subItem.title;
                this.$emit('didClick', title);
            },
            // 监听输入框改变
            inputChange: function(event) {
                console.log(event.detail.value);
                console.log(event.currentTarget.id);
                var value = event.detail.value;
                var ID = event.currentTarget.id;
                var datas = this.lists;
                for (let i = 0; i < datas.length; i++) {
                    var item = datas[i];
                    for (let j = 0; j < item.length; j++) {
                        var subItem = item[j];
                        var title = subItem.title;
                        if(title == ID) {
                            subItem.detail = value;
                        }
                    }
                }
            }
        },
    }
</script>

<style>
    .content11 {
        background-color: lightblue;
    }

    .centerV-item {
        margin-top: 10px;
    }
    .centerV-subItem {
        /* display: flex; */
        height: 100px;
        background-color: lightgray; 
    }
    .subItem-topV {
        display: flex;
        height: 99px;
    }

    .subItem-left {
        display: flex;
        align-items: center;
        text-align: left;
        /* width: 40%; */
        /* margin-left: px; */
        /* background: green; */
    }

    .subLeft-title {
        color: blue;
        font-size: 20px;
        margin-left: 20px;
    }
    .subLeft-subTitle {
        color: black;
        font-size: 14px;
    }

    .subLeft-subTitle1 {
        font-size: 14px;
        color: red;
    }
    

    .subItem-right {
        display: flex;
        /* width: 60%; */
        align-items: center;
        margin-right: 20px;
        text-align: right;
        margin-left: auto;
        background: red;
    }

    .subRight-normalV {

    }

    .subRight-title {

    }
    .subRight-title1 {

    }
    .subRight-inputV {
        display: flex;
        background: red;
    }
    .inputV-input {

    }

    .inputV-text {

    }

    .subItem-btmV {
        height: 1px;
        background: black;
        margin-left: 10px;
        margin-right: 10px;
    }
    

    



</style>